<template>
	<view class="Global">
		<!-- 背景图片铺满 -->
		<!-- <image class="imagepage" src="/static/background@2x.png" mode=""></image> -->
		<bgImage></bgImage>
		<!-- <view class="personnel" :style="{'height':tarbarHeight+'px'}">
      <image @click="backOnClick" src="../../../static/logo.png" class="backImg" mode=""></image>
      <text class="title">{{personnelInfo}}</text>
    </view> -->


		<MyNav :title="title" bgColor="" :backIcon="isback"></MyNav>


    <view class="listDataOut">

      <view class="listDataInner" >

        <view class="listDataInnerTop">
          <view class="listDataInnerTopLeft">
            <image class="listDataInnerTopLeftImg" src="/static/logo.png" mode=""></image>
          </view>
          <view class="listDataInnerTopRight">
            <text class="listDataInnerTopRightText">订单编号：{{itemdata.orderCode}}</text>
            <text class="listDataInnerTopRightText">款式：{{itemdata.styleName}}</text>
            <text class="listDataInnerTopRightText">日期：{{itemdata.createTime}}</text>
            <text class="listDataInnerTopRightText" v-if="itemdata.status=='0'">状态：未生产</text>
            <text class="listDataInnerTopRightText" v-if="itemdata.status=='1'">状态：生产中</text>
            <text class="listDataInnerTopRightText" v-if="itemdata.status=='2'">状态：生产完成</text>
          </view>

        </view>

      </view>

    </view>

		<!-- 提示信息 -->
		<view class="tipsInfo">
<!--			<text class="tipsInfoStyle">{{ tipsInfo }}</text>-->
			<text @click="selectData()" class="updateInfoStyleLeft">选择工序</text>
			<text @click="refreshClick()" class="updateInfoStyle">{{ updateInfo }}</text>
		</view>


		<!-- 列表标题 -->
		<view class="titleStyle">

			<text class="titleStyleSerial">序号</text>
			<text class="titleStyleSerial">分类</text>
			<text class="titleStyleSerial">编号</text>
			<text class="titleStyleName">工序名称</text>
			<text class="titleStyleName">工价</text>
			<text class="titleStyleNameOp">操作</text>
		</view>
		<!-- 列表内容 -->



		<scroll-view scroll-y="true" class="titleStyleTitle" @scrolltolower="scrolltolowerClick">

			<view v-for="(item,index) in listData" >
				<view class="titleStyleList" v-if="index%2==0">
					<text class="titleStyleNumList">{{ index+1 }}</text>
					<text class="titleStyleNumList">{{ item.templateName }}</text>
					<text class="titleStyleNumList">{{ item.processCode }}</text>
					<text class="titleStyleSerialList">{{ item.processName }}</text>
					<input class="titleStyleSerialListInput" v-model="item.processPrice"></input>
					<text class="titleStyleSerialListButton" @click="deleteData(index)" >删除</text>
				</view>
				<view class="titleStyleListElse" v-if="index%2!=0">
          <text class="titleStyleNumList">{{ index+1 }}</text>
					<text class="titleStyleNumList">{{ item.templateName }}</text>
					<text class="titleStyleNumList">{{ item.processCode }}</text>
					<text class="titleStyleSerialList">{{ item.processName }}</text>
					<input class="titleStyleSerialListInput" v-model="item.processPrice"></input>
					<text class="titleStyleSerialListButton" @click="deleteData(index)">删除</text>

				</view>

				<view class="line"></view>
			</view>

		</scroll-view>


		<view class="loginContent">

			<button @click="saveData()" style="color:#ffffff" class="login" type="default">{{ login }}</button>
		</view>




		<!-- 点击列表弹出-->
		<uni-popup ref="popupBag" type="bottom">
			<view class="bagDetail">
				<text class="bagDetailUpadte" @click="updateData()">修改</text>
				<view class="lineBg"></view>
				<!-- <text class="bagDetailDelete" @click="AddData()">新增</text>
		<view class="lineBg"></view> -->
				<text class="bagDetailDelete" @click="deleteData()">删除</text>
				<view class="lineBg1"></view>
				<text class="bagDetailCancel" @click="close()">取消</text>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import MyNav from '@/components/customnavbar.vue'
	import bgImage from '@/components/backgroundImage.vue'
	import {
    getOrderProcessList,orderProcessSaveAndUpdate
	} from '@/pages/api/api.js'
	export default {
		components: {
			MyNav,
			bgImage
		},
		data() {
			return {
				title: '工序工价',
				isback: true,


				personnelInfo: '工序工价',
				tops: 0,
				height: 0,
				tarbarHeight: 0,
				tipsInfo: 'Tips：点击对应行可进行修改或删除操作',
				updateInfo: '刷新',
				login: '保存',


				listData: [],

				// 列表单个数据
				listItemData: {},
				processManagerData: {
					orderId: '',
					storeId: '',
					tenantId: '',
					pageNum: '1', // 当前页
					pageSize: '100', //页码大小
				},

				isRefresh: false,
        storeId: '',
        tenantId: '',
        orderId: '',
        itemdata: {},
        processData: [],
			}
		},
		onLoad(option) {
      console.log('option',option)
      let item = JSON.parse(decodeURIComponent(option.item));
      this.itemdata = item
      let id = item.id;
      this.orderId = id
      this.processManagerData.orderId = id
      console.log('id',id)
      const app = getApp();
      this.storeId = app.globalData.storeId
      this.tenantId = app.globalData.tenantId
			this.loadData()
		},
		onShow() {
			// 如果是提交状态返回isRefresh=1，才刷新页面，从详情过来无需刷新
			let pages = getCurrentPages();
			let currPage = pages[pages.length - 1];
			if (currPage.__data__.isRefresh) {
				// 重新获取数据
				console.log('获取数据');

				this.reUpload()
				// 每一次需要清除，否则会参数会缓存
				currPage.__data__.isRefresh = false
			}
      let that = this
      uni.$on('globleProcessEvent', function(res) {
        // console.log('3422222', res.listSizeData) //  为 B 页面传过来的值
        that.processData = res.listData
        console.log('选择工序返回数据', that.processData) //  为 B 页面传过来的值
        // 移除监听事件
        uni.$off('globleProcessEvent');
      })
      if(this.processData.length>0){
        this.processData.forEach(item=>{
          item.processPrice = '0'
          item.orderId = this.orderId
          item.storeId = this.storeId
          item.tenantId = this.tenantId
          item.processId = item.id
          item.id = null
        })

      }
      this.listData = [...this.listData, ...this.processData]


		},
		methods: {
			// 滚动条滚动底部
			scrolltolowerClick(e) {
				console.log('滚动加载', this.totalPage, this.processManagerData.pageNum);

				if (this.totalPage > this.processManagerData.pageNum) {

					++this.processManagerData.pageNum

          getOrderProcessList(this.processManagerData).then((res) => {
						// console.log('11获取数据成功', res);
						// console.log('221滚动条触底', res.code, (res.code == 200));
						if (res.code == 200) {
							// 列表累计
							this.listData = [...this.listData, ...res.rows]

						}
					}).catch((err) => {
						// console.error('11获取数据失败', err);
					});
				} else {
					uni.showToast({
						title: '已加载完全部数据',
						icon: 'none'
					});
				}
			},
			// 重置数据
			reUpload() {
				// 重置数据
				this.listData = []
				// 表示自动刷新本页
				this.loadData()
			},

			// 刷新数据
			refreshClick() {
				this.reUpload()
				console.log('点击刷新');
			},
			// 加载数据
			loadData() {
				const app = getApp();
				this.processManagerData.storeId = app.globalData.storeId
				this.processManagerData.tenantId = app.globalData.tenantId
				// 重置
				this.processManagerData.pageNum = 1;

        getOrderProcessList(this.processManagerData).then((res) => {
					// console.log('11获取数据成功', res);


					if (res.code == 200) {
						this.totalPage = (res.total / this.processManagerData.pageSize)
						if (this.totalPage > 1) {
							++this.totalPage
						}

						// 计算总页数
						this.totalPage = parseInt(this.totalPage)

						// this.listSizeData = this.listSizeData.concat(res.rows)
						// this.listData = [...this.listData, ...res.rows]
						this.listData = res.rows

						//获取数据的时候foreach循环一下，添加show=false
						// this.listData.forEach((item, index) => {
						// 	this.$set(item, 'num', index + 1)
						// })


					}
					// console.log('2211获取数据成功', res, this.totalPage, this.listSizeData.length);
				}).catch((err) => {
					// console.error('11获取数据失败', err);
				});
			},
      // 选择工序
      selectData() {
        // let list = this.workList
        let parmas = {
          storeId: this.storeId,
          tenantId: this.tenantId,
          // selectList: list
        }
        uni.navigateTo({
          url: '/subPack/styleManagement/styleManagementSelect/styleManagementSelect?data=' +
              encodeURIComponent(JSON.stringify(parmas)),
          success: res => {},
          fail: () => {},
          complete: () => {}
        });
      },
      saveData(){
        let data = {
          orderId: this.orderId,
          processList: this.listData
        }
        orderProcessSaveAndUpdate(data).then(res=>{
          if (res.code == 200) {
            // 显示提示信息
            uni.showToast({
              title: res.msg,
              icon: 'none'
            });
            let pages = getCurrentPages();
            let prevPage = pages[pages.length - 2]; //上一个页面
            //直接调用上一个页面的setData()方法，把数据存到上一个页面中去
            prevPage.setData({
              isRefresh: 1
            })
            // this.loadData()
          }else{
            // 显示提示信息
            uni.showToast({
              title: res.msg,
              icon: 'none'
            });
          }
        })
      },
			// 新增数据
			AddData() {
				console.log('新增数据');
				uni.navigateTo({
					url: '/subPack/processmanagement/processManagerAdd/processManagerAdd',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			// 修改数据
			updateData() {
				console.log('修改数据', this.listItemData);
				uni.navigateTo({
					url: '/subPack/processmanagement/processManagerUpdate/processManagerUpdate?item=' +
						encodeURIComponent(JSON.stringify(this.listItemData)),
					success: res => {},
					fail: () => {},
					complete: () => {}
				});

				this.close()

			},
			//删除数据
			deleteData(index) {
				console.log('删除数据', this.listData);
				// 删除
				this.listData.splice(index,1)
			},

			// 打开弹框
			open(e) {
				console.log('点了');
				this.$refs.popupBag.open('bottom')
				console.log('列表点击事件', e);
				this.listItemData = e


			},
			// 关闭弹框
			close() {
				this.$refs.popupBag.close()
			},
			// 列表点击事件
			listItemClick(e) {

				/* uni.navigateTo({
				  url: '/pages//subPack/process/processTemplateUpdate/processTemplateUpdate',
				  success: res => {},
				  fail: () => {},
				  complete: () => {}
				}); */
				this.open(e)
			},

			addClick() {

			},

			backOnClick() {
				uni.navigateBack({
					delta: 1
				});
				console.log('点击返回');
			}
		},
		onReady() {
			// 获取标题栏和状态栏高度
			uni.getSystemInfo({
				success: (e) => {
					this.tops = e.statusBarHeight;
					let custom = uni.getMenuButtonBoundingClientRect();
					this.height = custom.height + (custom.top - e.statusBarHeight) * 2;
					this.tarbarHeight = this.tops + this.height;
				}
			})

		}
	}
</script>

<style>
	.lineBg {
		width: 100%;
		height: 1rpx;
		background: #F9FCFF;


	}

	.lineBg1 {
		width: 100%;
		height: 20rpx;
		background: #F9FCFF;
	}

	.bagDetailCancel {
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;


	}

	.bagDetailDelete {
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: red;

	}

	.bagDetailUpadte {
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		/* border-radius: 20rpx 20rpx 0 0; */
		/* background-color: white; */
	}

	.bagDetail {
		width: 100%;
		height: 380rpx;

		border-radius: 50rpx 50rpx 0 0;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;


	}

	.loginContent {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 750rpx;
		background-color: #45A8FF;

	}

	.login {
		display: flex;
		justify-content: center;
		margin-top: 20rpx;
		width: 550rpx;
		height: 110rpx;

		border-radius: 30rpx;
		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		font-weight: bold;

		bottom: 60rpx;
		position: absolute;
		background: linear-gradient(90deg, #45A8FF, #0AE1C6);

	}

	.titleStyleNumList {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 20%;
		height: 100%;
		font-size: 24rpx;
		color: #333333;

		text-align: justifyLeft;
		font-style: normal;
		text-transform: none;
	}

	.titleStyleSerialList {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 30%;
		height: 100%;
		font-size: 24rpx;
		color: #333333;

		text-align: justifyLeft;
		font-style: normal;
		text-transform: none;
	}

  .titleStyleSerialListInput {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30%;
    height: 100%;
    font-size: 24rpx;
    color: #333333;
    border: 1rpx solid #9E9E9E;
    text-align: justifyLeft;
    font-style: normal;
    text-transform: none;
    margin-right: 10rpx;
  }

  .titleStyleSerialListButton {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120rpx;
    height: 60rpx;
    font-size: 24rpx;
    color: #ffffff;
    background: red;
    border-radius: 30rpx;
    text-align: justifyLeft;
    font-style: normal;
    text-transform: none;
  }

	.titleStyleNameList {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 42%;
		height: 100%;
		font-size: 24 rpx;
		color: #333333;

		overflow: hidden;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;


	}

	.titleStyleNum {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 23%;
		height: 100%;
		font-size: 24rpx;


		text-align: justifyLeft;
		font-style: normal;
		text-transform: none;
	}

	.titleStyleSerial {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 20%;
		height: 100%;
		font-size: 24rpx;

		color: #FFFFFF;
		text-align: justifyLeft;
		font-style: normal;
		text-transform: none;
	}

	.titleStyleName {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 30%;
		height: 100%;
		font-size: 24rpx;
		color: #FFFFFF;
		font-style: normal;
	}

  .titleStyleNameOp {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120rpx;
    height: 100%;
    font-size: 24rpx;
    color: #FFFFFF;
    font-style: normal;
  }

	.line {
		width: 690 rpx;
		height: 1 rpx;
		background: #F9FCFF;

		margin-left: 30rpx;

	}

	.titleStyleTitle {
		display: flex;
		flex-direction: column;
		justify-content: center;

		width: 690rpx;
		height: 720rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 30rpx 30rpx;

	}

	.titleStyle {
		display: flex;
		justify-content: center;
		align-items: center;

		width: 690rpx;
		height: 80rpx;
		background: #0081FF;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		margin-top: 42rpx
	}

	.titleStyleList {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #333333;
		width: 690rpx;
		height: 80rpx;

	}

	.titleStyleListElse {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #333333;
		width: 690rpx;
		height: 80rpx;
		background: #F9FCFF;
	}




	.tipsInfo {
		display: flex;
		/*justify-content: space-between;*/
		align-items: center;
		width: 100%;
		margin-top: 40rpx;
	}

	.tipsInfoStyle {
		font-size: 24rpx;
		color: #FF4E00;
		line-height: 80rpx;
		text-align: justifyLeft;
		font-style: normal;
		text-transform: none;
		margin-left: 30rpx;
	}

  .updateInfoStyleLeft {
    width: 140rpx;
    height: 60rpx;
    background: #0081FF;
    border-radius: 30rpx;
    margin-right: 30rpx;
    font-size: 24rpx;
    align-items: center;
    color: white;
    display: flex;
    justify-content: center;
    margin-left: 30rpx;
  }
	.updateInfoStyle {
		width: 140rpx;
		height: 60rpx;
		background: #0081FF;
		border-radius: 30rpx;
		margin-right: 30rpx;
		font-size: 24rpx;
		align-items: center;
		color: white;
		display: flex;
		justify-content: center;

	}

	.imagepage {

		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		position: absolute;
		z-index: -1;
		left: 0;
		right: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;
	}
  .listDataOut {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 750rpx;
    margin-top: 30rpx;

  }

  .listDataInner {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;

    width: 690rpx;
    height: 295rpx;
    background: #FFFFFF;
    border-radius: 30rpx;
  }
  .listDataInnerTop {
    position: relative;
    display: flex;
    flex-direction: row;

    display: flex;
    justify-content: left;
    width: 100%;
  }
  .listDataInnerTopLeft {
    width: 190rpx;
    height: 190rpx;
    background: #ECF5FD;
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    margin-right: 30rpx;
    margin-left: 30rpx;
    margin-top: 30rpx;
  }
  .listDataInnerTopLeftImg {
    width: 188rpx;
    height: 148rpx;

  }
  .listDataInnerTopRightText {
    font-family: HarmonyOS Sans SC;
    font-weight: 600;
    font-size: 24rpx;
    color: #333333;
    line-height: 50rpx;
  }


  .listDataInnerTopRightImgBg {
    display: flex;
    justify-content: center;
    align-items: center;

    position: absolute;
    top: 30rpx;
    right: 30rpx;
  }

  .listDataInnerTopRightImg {
    width: 50rpx;
    height: 50rpx;
    padding: 10rpx;

  }

  .listDataInnerTopRight {
    display: flex;
    flex-direction: column;
    align-items: left;
    margin-top: 30rpx;
  }
</style>
